<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <%@ include file="/WEB-INF/views/include/head.jsp"%>
    <script src="j${ctxStatic}/s/jquery-1.9.1.min.js"></script>
    <script src="${ctxStatic}/js/DateTimePicker.js"></script>
    <script src="${ctxStatic}/js/layer.js"></script>
    <script src="${ctxStatic}/js/style.js"></script>
    <link rel="stylesheet" href="${ctxStatic}/css/common_erp.css">
    <link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
    <script>
    $(function(){
            $(".tabBox ul li").each(function(){
                var index=$(this).index();

                $(".tabBox ul li").eq(0).addClass("active");

                $(this).click(function(){

                    //alert(index);

                    $(this).addClass("active").siblings().removeClass("active");

                    $(".tabBoxSm > .tabSm").eq(index).stop(true).show().siblings().stop(true).hide();
					
					var tableW = $(".tabBoxSm > .tabSm").eq(index).find('.tableHead').width();
					var tabodyH = $(".tabBoxSm > .tabSm").eq(index).find('.tableBody').height();
					var tableScrollH = $(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').height();
					if(tabodyH>tableScrollH){
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width',tableW + 18 + 'px')
					}else{
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width','inherit')
					}

                })

            })

        })
        
        $(document).ready(function(){
        	
        	var row = document.getElementById("materialTable").rows.length;
    		$("#materialSum").val(row);
    		giveValue();
        	
        });
    
    function giveValue() {
		var tolLgh = $(".totalPriceTxt").length;
		var sumPrice = 0;
		for (var i = 0; i < tolLgh; i++) {
			sumPrice += parseFloat($(".totalPriceTxt").eq(i).val());
		}
		$("#priceTxt").text(sumPrice);
		formatMoneyThis($("#priceTxt"), 2);
	}
    
  //格式化金额
    function formatMoneyThis(e, n) {  
    	var s=$(e).text().replace(",","").trim();
    	//判断字符串是否为数字     //判断正整数 /^[1-9]+[0-9]*]*$/  
    	var numberVerification = /^[0-9]+.?[0-9]*$/;   
        if (numberVerification.test(s)){
        	n = n > 0 && n <= 20 ? n : 2;  
            s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";  
            var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];  
            t = "";  
            for (var i = 0; i < l.length; i++) {  
                t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");  
            } 
            $(e).text(t.split("").reverse().join("") + "." + r);
        }else{
        	$(e).text("");
        }
    }  
    </script>
</head>
<body>   
<div class="layerHeader clearfix">
	<p class="headerTitle"><spring:message code="bigConsumption_show"/></p>
    <div class="headerButton clearfix">
    <shiro:hasPermission name="bigcargo:consumption:edit">
        <button type="button" onclick="window.location.href='${ctx}/bigcargo/consumption/edit?id=${bigConsumption.id}'">
        <spring:message code="bigConsumption_edit" />
        </button>
    </shiro:hasPermission>
        <button type="button" onclick="closeWin()"><spring:message code="btn_cancle"/></button>
    </div>
</div>
<div class="tabBox">
    <ul class="clearfix">
     	<li class="active"><spring:message code="bigConsumption"/></li>
        <li><spring:message code="bigConsumption_auxiliary_plane_batching"/></li>
    </ul>
    <p class="tab-a">单件成本：<span id="priceTxt"></span></p>
</div>
<form id="inputForm" method="post" >
<input type="hidden" id="id" name="id"  value="${bigConsumption.id}">
<input type="hidden" id="refUnitCostNo" name="refUnitCostNo"  value="${bigConsumption.refUnitCostNo}">
<input type="hidden" id="styleId" name="styleId"  value="${bigConsumption.styleId}">
<div class="tabBoxSm showHtml" >
    <div class="tabSm smOrderBox">
        <div class="items clearfix">
            <div class="col-33 clearfix haveToBox">
            	<p class="tit"><spring:message code="bigConsumption_no" /></p>
                <p>${bigConsumption.styleNo}</p>
            	<p class="haveTo">*</p>                 
            </div>
            <div class="col-33 clearfix">
                <p class="tit"><spring:message code="bigConsumption_name" /></p>
                <p>${bigConsumption.styleNameCn}</p>
            </div>
        </div>
        <div class="items clearfix">
            <div class="col-33 clearfix">
                <p class="tit"><spring:message code="bigConsumption_refUnitCostNo" /></p>
                <p>${bigConsumption.unitCostNo}</p>
                <input type="hidden" id="unitCostNo" value="${bigConsumption.unitCostNo}">
            </div>
        </div>
        <p class="title" style="margin-top: 20px;"><spring:message code="bigConsumption_Information" /></p>
        <div class="clearfix">     	
            	<div class="items clearfix">        	
                    <div class="col-33 clearfix">
                        <p class="tit"><spring:message code="bigConsumption_head_unitCostMiddleStandard" /></p>
                        <p>${bigConsumption.unitCostMiddleStandard}</p>
                    </div>
                    <div class="col-33 clearfix">
                        <p class="tit"><spring:message code="bigConsumption_unitCostLossRate" /></p>
                        <p>${bigConsumption.unitCostLossRate}&nbsp;%</p>
                    </div>
					<div class="col-33 clearfix">
                        <p class="tit"><spring:message code="bigConsumption_cost" /></p>
                        <p>${bigConsumption.unitCost}</p>
                    </div>
                </div>
                <div class="items clearfix" style="margin-bottom:0;">     
                    <p class="tit"><spring:message code="bigConsumption_unitCostRemark" /></p>
                    <p style="width:448px;height: 60px" readonly="readonly">${bigConsumption.unitCostRemark}</p>
                </div>
				<div class="items clearfix">        	
                    <div class="col-33 clearfix">
                        <p class="tit"><spring:message code="bigConsumption_creater" /></p>
                        <p>${bigConsumption.createBy.firstName}${bigConsumption.createBy.lastName}</p>
                    </div>
                    <div class="col-33 clearfix">
                        <p class="tit"><spring:message code="bigConsumption_create_date" /></p>
                        <p><fmt:formatDate value="${bigConsumption.createDate}" pattern="yyyy-MM-dd HH:mm" /></p>
                    </div>
                </div>
        </div>
	</div>
    <div class="tabSm none">
    	<div class="tableArea">
        	<div class="tableScroll tableScrollSm">
        		<table cellpadding="0" class="tableHead">
                    <thead>
                    <tr>
                        <th class="tab-wltp">物料图片</th>
                        <th class="tab-wlmcbj">物料编码/名称</th>
                        <th class="tab-wllb">物料类别</th>
                        <th class="tab-fk">幅宽</th>
                        <th class="tab-dw">单位</th>
                        <th class="tabInput-dh">单耗</th>
                        <th class="tabInput-sh">损耗（%）</th>
                        <th class="tabInput-hshdh">含损耗单耗</th>
                        <th class="tabInput-ckdj">参考单价</th>
                        <th class="tabInput-ckcb">参考成本</th>
                        <th class="tabInput-sysm">使用说明</th>
                    </tr>
                    </thead>
                </table>
                <table cellpadding="0" class="tableBody" id="materialTable">
                    <tbody>
                    <c:forEach items="${bigConsumption.bigConsumptionMaterialList}" var="material">
                    <tr>
                        <td class="tab-wltp"><img src="${material.materialFile}" class="wltp"></td>
                        <td class="tab-wlmcbj">${material.materialCode }<br>${material.materialNameCN}</td>
                        <td class="tab-wllb">${material.materialTypeCd}</td>
                        <td class="tab-fk">${material.materialSpec}</td>
                        <td class="tab-dw">${material.materialCostUnit}</td>
                        <td class="tabInput-dh"><fmt:formatNumber value="${material.materialCost}" pattern="#,##0.00#"/></td>
                        <td class="tabInput-sh"><fmt:formatNumber value="${material.materialPreLoss}" pattern="#,##0.00#"/></td>
                        <td class="tabInput-hshdh"><fmt:formatNumber value="${material.materialLoss}" pattern="#,##0.00#"/></td>
                        <td class="tabInput-ckdj"><fmt:formatNumber value="${material.materialUnitPrice}" pattern="#,##0.00#"/></td>
                        <td class="tabInput-ckcb"><fmt:formatNumber value="${material.materialTotalPrice}" pattern="#,##0.00#"/></td>
                        <td class="tabInput-sysm">${material.remarks}</td>
                        <input type="hidden" class="totalPriceTxt" value="${material.materialTotalPrice}"/>
                    </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</form>
<script>
	window.onload = function(){
			var windowH = window.innerHeight
					||document.documentElement.clientHeight
					||document.body.clientHeight
			$('.tabSm').css({
				'height':windowH - 77,
			});
			$('.tableScrollSm').css({
				'height':windowH - 91
			})
		}
	
</script>

</body>
</html>